import React, { useEffect, useState } from 'react';
import { Select, Input, Button, Table, Switch, Drawer, Descriptions } from 'antd';
import _ from 'lodash'
import service from '../../../../api'
import './Filter.scss'
function Filter(props) {
    const { Search } = Input;
    //分页
    const [pagination, setPagination] = useState({ current: 0, pageSize: 0 });
    const [category, setCategory] = useState([])
    //定义选中的分类并保存
    const [slectkey, setSlectkey] = useState([])
    //详情信息
    const [detailInfo, setDetailInfo] = useState({})
    //产品详情展示的抽屉
    const [open, setOpen] = useState(false);
    //产品列表
    const [prolist, setProlist] = useState([])
    //抽屉开启
    const showDrawer = () => {
        setOpen(true);
    };
    //抽屉关闭
    const onClose = () => {
        setOpen(false);
    };
    //请求产品分类
    var Category = async () => {
        var res = await service.pro.pro_getCategory();
        //将字符串数组转换为对象数组
        const newArray = res.data.data.map(function (item) {
            return { 'value': item, 'lable': item };
        });

        setCategory(newArray)
    }
    //请求产品列表
    var getprolist = async () => {
        var res = await service.pro.pro_list();
        setProlist(res.data.data)
    }
    useEffect(() => {
        getprolist()
        Category()
    }, [])
    //下拉菜单部分
    const handleChange = (value) => {
        setSlectkey(value)
    };
    //根据关键词和分类进行搜索
    const onSearch = async (value) => {
        var res = await service.pro.pro_searchPro({ category: slectkey, search: value });
        if (res.data.code == 200) {
            setProlist(res.data.data)
        }
    }
    //详情
    const toDetail = async (record) => {
        showDrawer()
        var res = await service.pro.pro_detail({ proid: record.proid });
        console.log(res.data.data);
        if (res.data.code == 200) {
            setDetailInfo(res.data.data[0])
        }
    }

    const columns = [
        {
            title: '序号',
            width: 100,
            key: 'number',
            render: (_, record, index) => <div>{(pagination.current - 1) * pagination.pageSize + index + 1}</div>,
        },
        {
            title: '图片',
            key: 'picture',
            width: 100,
            render: (_, record, index) => <img src={record.img1} />,
        },
        {
            title: '名称',
            key: 'name',
            width: 100,
            render: (_, record, index) => <div>{record.proname}</div>,
        },
        {
            title: '品牌',
            key: 'brand',
            width: 100,
            render: (_, record, index) => <div>{record.brand}</div>
        },
        {
            title: '分类',
            key: 'brand',
            width: 100,
            render: (_, record, index) => <div>{record.category}</div>
        },
        {
            title: '原价',
            key: 'brand',
            width: 100,
            render: (_, record, index) => <div>{record.originprice}</div>
        },
        {
            title: '折扣',
            key: 'brand',
            width: 100,
            render: (_, record, index) => <div>{record.discount}</div>
        },
        {
            title: '销量',
            key: 'brand',
            width: 100,
            render: (_, record, index) => <div>{record.sales}</div>
        },
        {
            title: '是否售卖',
            key: 'issale',
            width: 100,
            render: (_, record, index) => <Switch checked={record.issale == 1} />,
        },
        // toChange(checked, record.bannerid)
        {
            title: '是否秒杀',
            key: 'isseckill',
            width: 100,
            render: (_, record, index) => <Switch checked={record.isseckill == 1} />,
        },
        {
            title: '是否推荐',
            key: 'isrecommend',
            width: 100,
            render: (_, record, index) => <Switch checked={record.isrecommend == 1} />,
        },
        {
            title: '操作',
            key: 'action',
            width: 100,
            render: (_, record, index) => <Button danger type="primary" > Delete </Button>,
        },
        // toDelete(record.bannerid) 
    ]
      //页码  
      var onPageChange = (pagination) => {

        setPagination(pagination)
    }
    return (
        <div className='filter-box'>
            <div className='filter-box-topbox'>
                <Select placeholder="请选择分类" style={{ width: 120, height: 40 }} onChange={handleChange}
                    options={category}
                />
                <Search placeholder="请输入关键词" allowClear enterButton="查询" size="large" onSearch={onSearch} style={{ width: 300 }} />
            </div>
            <Table className='table' style={{ marginTop: 20 }} columns={columns} dataSource={prolist} onChange={onPageChange} onRow={(record) => { return { onClick: () => { toDetail(record) } } }} />
            <Drawer title="商品详情" placement="bottom" onClose={onClose} open={open}>
                <Descriptions bordered>
                    <Descriptions.Item label="category">{detailInfo.category}</Descriptions.Item>
                    <Descriptions.Item label="brand">{detailInfo.brand}</Descriptions.Item>
                    <Descriptions.Item label="img"><img src={detailInfo.img1} style={{ maxHeight: 50 }} /></Descriptions.Item>
                    <Descriptions.Item label="originprice">￥{detailInfo.originprice}</Descriptions.Item>
                    <Descriptions.Item label="discount">{detailInfo.discount}</Descriptions.Item>
                    <Descriptions.Item label="sales">{detailInfo.sales}</Descriptions.Item>
                    <Descriptions.Item label="proname">{detailInfo.proname}</Descriptions.Item>
                    <Descriptions.Item label="description">
                        {detailInfo.desc}
                    </Descriptions.Item>
                </Descriptions>
            </Drawer>
        </div>
    );
}

export default Filter;